@mixin flex($justify:center,$align:center,$direction:row) {
	display: flex;
	justify-content: $justify;
	align-items: $align;
	flex-direction: $direction;
}
@mixin bgm($name) {
	// background-image:url("../common/images/partner/"+$name);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
@mixin withdraw-box($left:30rpx) {
	width: 690rpx;
	position: absolute;
	bottom: 0;
	left: $left;
	background-color: #fff;
	padding: 32rpx;
	border-radius: 16rpx 16rpx 0 0;
	@include flex(space-between,center);
	.withdraw-amount {
		@include flex(flex-start,center);
		font-size: 24rpx;
		color: #333333;
		line-height: 34rpx;
		.withdraw-amount-value {
			margin-left: 12rpx;
			font-size: 36rpx;
			font-weight: 600;
			color: #E84445;
			line-height: 50rpx;
		}
	}
	.withdraw-button{
		@include flex(center,center);
		width: 150rpx;
		height: 60rpx;
		background: #FF4544;
		border-radius: 30rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 40rpx;
	}
}

view {
	box-sizing: border-box;
}
.filter {
    @include flex(flex-start, center);

	.filter-value {
		font-size: 32rpx;
		color: #303133;
		line-height: 34rpx;
	}

	.filter-icon {
		margin-left: 8rpx;
		width: 0;
		height: 0;
		border-width: 12rpx;
		border-bottom-width: 0;
		border-style: solid;
		border-color: #909399 transparent transparent transparent;
	}
}

.filter-data {
		margin-top: 40rpx;
		padding: 0 30rpx;

		.period-head {
			@include flex(space-between, center);

			.period-title {
				font-size: 28rpx;
				color: #303133;
				line-height: 40rpx;
			}
		}

		.period-stats {
			margin-top: 24rpx;
			@include flex(space-between, center);

			.p-stats-item {
				@include flex(center, center, column);
				width: 222rpx;
				height: 170rpx;
				background: #FFFFFF;
				border-radius: 8rpx;

				.p-stats-title {
					font-size: 24rpx;
					color: #909399;
					line-height: 34rpx;
				}

				.p-stats-value {
					margin-top: 8rpx;
					margin-bottom: 4rpx;
					font-size: 32rpx;
					color: #303133;
					line-height: 45rpx;
				}

				.p-stats-changed {
					font-size: 20rpx;
					color: #FF4544;
					line-height: 28rpx;

					&.green {
						color: #12D0AE;
					}
				}
			}
		}
	}

	.agent-list {
		.agent-item {
			margin-top: 24rpx;
			background-color: #fff;
			border-radius: 16rpx;

			.agent-head {
				padding: 30rpx;
				@include flex(space-between, center);
				border-bottom: 1rpx solid #EBEBEB;

				.agent-time {
					font-size: 28rpx;
					color: #303133;
					line-height: 40rpx;
				}

				.agent-status {
					font-size: 28rpx;
					color: #FF4544;
					line-height: 34rpx;
				}
				.agent-link {
					font-size: 24rpx;
					color: #909399;
					line-height: 34rpx;
					@include flex(flex-start,center);
					.agent-link-arrow {
						width: 32rpx;
						height: 32rpx;
						@include bgm('arrow-right-gray.png');
					}
				}
			}

			.agent-fields {
				padding: 30rpx;
				@include flex(flex-start, flex-start);

				.agent-fields-column {
					width: 50%;
				}

				.agent-field {
					margin-bottom: 16rpx;
					font-size: 26rpx;
					color: #606266;
					line-height: 37rpx;

					&:last-child {
						margin-bottom: 0;
					}
				}
			}
		}
	}

